import { Form, Modal, Radio, Alert, Button } from "antd";
import { CommonModal } from "@/views/components/CommonModal";
import { CommonForm } from "@/pages/OrderModule/common/components/CommonForm";
import Typography from "@/pages/OrderModule/common/components/Typography";
import { useLocalStorageState } from "ahooks";
import { useEffect } from "react";
/**
 *
 * @param {*} param0 options [{value,label}]
 * @returns
 */
export default ({
	footerRender,
	tipsRender,
	storageKey,
	visible,
	title,
	width = "396px",
	alert,
	options,
	onCancel,
	onOk,
	key = "value"
}) => {
	const [lastValue, setLastValue] = useLocalStorageState("use-radio-model-" + storageKey, {
		defaultValue: ""
	});

	const [form] = Form.useForm();
	function handleOk() {
		if (options) {
			form.submit();
		} else {
			onOk({ value: null });
		}
	}
	function onFinish() {
		onOk(form.getFieldsValue());
	}

	useEffect(() => {
		if (storageKey) {
			form.setFieldValue("value", lastValue);
		}
	}, []);
	const onChange = e => {
		if (storageKey) {
			setLastValue(e.target.value);
		}
	};
	const footerProps = {};
	if (tipsRender) {
		footerProps["footer"] = (
			<div className="flx-justify-between">
				{tipsRender()}
				<div>
					<Button key="default" type="default" onClick={onCancel} size="default">
						取消
					</Button>
					<Button key="primary" type="primary" onClick={handleOk} size="default">
						确定
					</Button>
				</div>
			</div>
		);
	}
	if (footerRender) {
		footerProps["footer"] = footerRender();
	}

	return (
		<CommonModal title={{ title }} open={visible} width={width} onCancel={onCancel} onOk={handleOk} {...footerProps}>
			{alert && (
				<div className="mb14">
					<Typography as="s1">{alert}</Typography>
				</div>
			)}

			{options && (
				<CommonForm
					formProps={{
						form,
						onFinish
					}}
					columns={[
						{
							name: "value",
							Component: Radio.Group,

							rules: [{ required: true, message: "请选择" }],
							props: {
								options,
								onChange
							}
						}
					]}
				></CommonForm>
			)}
		</CommonModal>
	);
};
